<template>
    <!-- 收获地址 -->
    <van-contact-card type="edit" :name="`${address.name} ${address.region_text}`" :tel="address.tel"
        v-if="Object.getOwnPropertyNames(address).length > 0" @click="OnAddressSelect" />
    <van-contact-card type="add" v-else @click="AddressShow = true" />

    <!-- 商品卡片 -->
    <van-card v-for="(item, key) in CartList" :thumb="item.product.thumb_text" :num="item.nums"
        @click-thumb="ToProductInfo(item.proid)">
        <template #title>
            <div class="title" @click="ToProductInfo(item.proid)">{{ item.product.name }}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
            <van-tag v-for="(attr, index) in item.attrs" :key="index" class="tag" type="primary">{{ attr.value }}</van-tag>
            <van-tag class="tag" type="warning" v-if="item.type === 'live'">直播商品</van-tag>
        </template>

        <template #desc v-else>
            <van-tag class="tag" type="danger">无规格数据</van-tag>
            <van-tag class="tag" type="warning" v-if="item.type === 'live'">直播商品</van-tag>
        </template>

        <template #price>
            <div class="price">单价：￥{{ item.price }}</div>
            <div class="price">合计：￥{{ item.total }}</div>
        </template>
    </van-card>

    <van-cell title="支付方式" :value="PayActive.text" is-link @click="PayShow = true" />

    <!-- 支付方式的选择器 -->
    <van-popup v-model:show="PayShow" position="bottom" round>
        <van-picker title="选择支付方式" :columns="PayList" @cancel="PayShow = false" @confirm="OnPayConfirm" />
    </van-popup>

    <!-- 优惠券单元格 -->
    <van-coupon-cell :coupons="CouponList" :chosen-coupon="CouponActive" @click="CouponShow = true" />

    <!-- 优惠券列表 -->
    <van-popup v-model:show="CouponShow" round position="bottom" style="height: 90%; padding-top: 4px;">
        <van-coupon-list :coupons="CouponList" :disabled-coupons="NotCouponList" :chosen-coupon="CouponActive"
            :exchange-button-disabled="true" :show-exchange-bar="false" @change="OnCouponChange" />
    </van-popup>

    <!--订单备注 -->
    <van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" maxlength="120" placeholder="请输入订单备注"
        show-word-limit />

    <!-- 添加收货地址 -->
    <van-popup v-model:show="AddressShow" position="bottom" round>
        <van-address-edit show-set-default :area-list="areaList" :area-columns-placeholder="['请选择', '请选择', '请选择']"
            :address-info="AddressInfo" @save="OnAddressAdd" />
    </van-popup>


    <!-- 提交动作栏 -->
    <van-submit-bar text-align="left" :price="total" button-text="确认支付" @submit="OnSubmit" />
</template>

<script setup>
import { areaList } from '@vant/area-data';
const { proxy } = getCurrentInstance();

const business = proxy.$business;
const address = ref({});
const CartList = ref([]);
const cartids = ref(proxy.$route.query.cartids ?? 0);
const remark = ref('');
const PayShow = ref(false);
const PayActive = ref({ text: '余额支付', value: 'money' });
const PayList = ref([
    { text: '余额支付', value: 'money' },
    { text: '微信支付', value: 'wx' },
    { text: '支付宝支付', value: 'zfb' },
])

const CouponList = ref([]);
const NotCouponList = ref([]);
const CouponShow = ref(false);
const CouponActive = ref(-1);
const AddressInfo = ref({});
const AddressShow = ref(false);

onBeforeMount(() => {
    GetAddressData();
    GetCartData();
    GetCouponData();

    AddressInfo.value = {
        name: business.value.nickname,
        tel: business.value.mobile,
        areaCode: business.value.district || business.value.city || business.value.province,
    }
})
// 获取地址列表
const GetAddressData = async () => {
    let cached = Object.getOwnPropertyNames(proxy.$address.value).length > 0 ? proxy.$address.value : null;

    if (cached) {
        address.value = cached;
    }

    let params = {
        busid: business.value.id
    }

    let result = await proxy.$http.post({
        url: '/cart/address',
        params
    })

    if (result.code === 1) {
        address.value = {
            id: result.data.id,
            name: result.data.consignee,
            tel: result.data.mobile,
            region_text: result.data.region_text + result.data.address
        }
    }
}
//  获取购物车列表
const GetCartData = async () => {
    let cart = Object.getOwnPropertyNames(proxy.$cart.value).length > 0 ? proxy.$cart.value : [];

    if (cart.length > 0 && !cartids.value) {
        CartList.value = cart;

        return false;
    }

    let params = {
        cartids: cartids.value,
        busid: business.value.id
    }

    let result = await proxy.$http.post({
        url: '/cart/confirm',
        params
    })

    if (result.code === 1) {
        CartList.value = result.data;

        CartList.value.map(item => item.attrs = JSON.parse(item.attrs));
    } else {
        proxy.$fail({
            message: result.msg,
            onClose: () => proxy.$router.back()
        })
    }
}
// 获取优惠卷列表
const GetCouponData = async () => {
    let params = {
        busid: business.value.id
    }

    let result = await proxy.$http.post({
        url: '/cart/coupon',
        params
    })

    if (result.code === 1) {
        for (let item of result.data.CouponList) {
            CouponList.value.push({
                id: item.id,
                name: item.coupon.title,
                startAt: item.coupon.createtime,
                endAt: item.coupon.endtime,
                rate: item.coupon.rate,
                valueDesc: `${item.coupon.rate * 100}`,
                unitDesc: '折',
                condition: item.coupon.status_text,
            })
        }

        for (let item of result.data.NotCouponList) {
            NotCouponList.value.push({
                id: item.id,
                name: item.coupon.title,
                startAt: item.coupon.createtime,
                endAt: item.coupon.endtime,
                rate: item.coupon.rate,
                valueDesc: `${item.coupon.rate * 100}`,
                unitDesc: '折',
                condition: item.coupon.status_text,
            })
        }
    }
}
// 点击地址添加事件
const OnAddressAdd = async (values) => {
    let params = {
        busid: business.value.id,
        consignee: values.name,
        address: values.addressDetail,
        mobile: values.tel,
        status: values.isDefault ? 1 : 0,
        code: values.areaCode,
        action: 'confirm'
    }

    let result = await proxy.$http.post({
        url: "/address/add",
        params
    })

    if (result.code === 1) {
        proxy.$success({
            message: result.msg,
            onClose: () => {

                AddressShow.value = false;

                address.value = {
                    id: result.data.id,
                    name: result.data.consignee,
                    tel: result.data.mobile,
                    region_text: result.data.region_text + result.data.address
                }

                // 更新
                proxy.$address.value = address.value;
            }
        })
    } else {
        proxy.$fail(result.msg);
    }
}
// 点击列表选择
const OnAddressSelect = () => {
    proxy.$router.push({ path: '/address', query: { action: 'select' } });
}
// 计算总价
const total = computed(() => {
    let total = 0;

    CartList.value.map((item) => total += parseFloat(item.total));

    if (CouponActive.value != -1) {
        let rate = CouponList.value[CouponActive.value].rate;

        total = (total * rate).toFixed(2);
    }

    return parseFloat(total * 100);
})

// 支付确认
const OnPayConfirm = ({ selectedOptions }) => {
    PayShow.value = false;
    PayActive.value = selectedOptions[0];
}

// 商品详情
const ToProductInfo = (proid) => proxy.$router.push({ path: '/product/info', query: { proid } });

// 优惠卷更改
const OnCouponChange = (index) => {
    CouponActive.value = index;

    CouponShow.value = false;

    if (index !== -1) {
        let coupon = CouponList.value[index];

        let total = 0;

        CartList.value.map(item => total += parseFloat(item.total));

        total = total.toFixed(2);

        let rate = coupon.rate ? coupon.rate : 1;

        let RatePrice = (parseFloat(total) * parseFloat(rate)).toFixed(2);

        let CouponPrice = (parseFloat(total) - parseFloat(RatePrice)).toFixed(2);

        CouponList.value[index].value = parseFloat(CouponPrice) * 100;
    }
}
// 提交
const OnSubmit = async () => {
    if (cartids.value) {
        let params = {
            busid: business.value.id,
            cartids: cartids.value,
            addrid: address.value.id,
            pay: PayActive.value.value,
            remark: remark.value
        }

        if (CouponActive.value !== -1) {
            params.couponid = CouponList.value[CouponActive.value].id;
        }

        let result = await proxy.$http.post({
            url: '/order/add',
            params
        })

        if (result.code === 1) {
            if (result.url) {
                proxy.$success({
                    message: result.msg,
                    onClose: () => {
                        proxy.$router.push({ path: result.url, query: result.data, replace: true });
                    }
                })
            } else {
                proxy.$router.push({ path: '/business/cashier', query: { payid: result.data.id } });
            }
        } else {
            proxy.$fail(result.msg);
        }
    } else {
        let info = CartList.value[0];

        // 组装数据
        let params = {
            busid: business.value.id,
            addrid: address.value.id,
            pay: PayActive.value.value,
            remark: remark.value,
            proid: info.proid,
            price: info.price,
            nums: info.nums,
            attrs: info.attrs.length > 0 ? JSON.stringify(info.attrs) : '',
        };

        if (CouponActive.value !== -1) {
            params.couponid = CouponList.value[CouponActive.value].id;
        }

        let result = await proxy.$http.post({
            url: '/order/buy',
            params
        })

        if (result.code === 1) {
            if (result.url) {
                proxy.$success({
                    message: result.msg,
                    onClose: () => {
                        proxy.$router.push({ path: result.url, query: result.data, replace: true });
                    }
                })
            } else {
                proxy.$router.push({ path: '/business/cashier', query: { payid: result.data.id } });
            }
        } else {
            proxy.$fail(result.msg);
        }
    }
}

</script>

<style scoped>
.van-card {
    background-color: #fff;
}

:deep(.van-card__bottom) {
    position: relative;
}

:deep(.van-card__num) {
    position: absolute;
    bottom: 0px;
    right: 5px;
}

.title {
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 5px;
}

.tag {
    margin-right: 5px;
}

.price {
    font-size: 12px;
    font-weight: bold;
}

/* 姓名只一行显示，超出隐藏 */
:deep(.van-contact-card__title) div:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>